<!--编辑景区-->
<template>
  <el-form :model="scenicSpot" status-icon :rules="rules" ref="scenicSpot" label-width="100px" class="demo-ruleForm">
    <el-form-item label="景区名字" prop="scenicSpotName">
      <el-input v-model="scenicSpot.scenicSpotName"></el-input>
    </el-form-item>
    <el-form-item label="景区介绍" prop="introduction">
      <el-input v-model="scenicSpot.introduction"></el-input>
    </el-form-item>
    <el-form-item label="地址" prop="address">
      <el-input v-model="scenicSpot.address"></el-input>
    </el-form-item>
    <el-form-item label="所属行政区" prop="district">
      <el-input v-model="scenicSpot.district"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm('scenicSpot')">提交</el-button>
      <el-button @click="resetForm('scenicSpot')">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data () {
    var validateExist = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('不能为空'))
      }
      callback()
    }

    var validateCheck = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('不能为空'))
      }
      callback()
    }
    return {
      id:'',
      scenicSpot: {
        scenicSpotName: '',
        introduction: '',
        address: '',
        district: ''
      },
      rules: {
        scenicSpotName: [
          { validator: validateExist,required: true, trigger: 'blur' }
        ],
        introduction: [
          { validator: validateCheck,required: true, trigger: 'blur' }
        ],
        address: [
          { validator: validateCheck,required: true, trigger: 'blur' }
        ],
        district: [
          { validator: validateCheck,required: true, trigger: 'blur' }
        ]
      }
    }
  },
  created(){
    this.getProfile();
  },
  methods: {

    getProfile(){
      this.id =  this.$route.query.id;
      this.$axios.get(`/scenic-spots/${this.id}`).then(res => {
        this.scenicSpot = res.data.data
      })
    },
    submitForm (scenicSpot) {
      this.$refs[scenicSpot].validate((valid) => {
        if (valid) {
          this.$axios.post('/scenic-spot/update', {
            id: this.id,
            scenicSpotName: this.scenicSpot.scenicSpotName,
            introduction: this.scenicSpot.introduction,
            address: this.scenicSpot.address,
            district: this.scenicSpot.district
          }).then(res => {
            this.$message({
              message: '编辑成功',
              type: 'success'
            })
            this.$router.push({path:'/scenic-spot-list'});
          })
        } else {
          this.$message({
            message: '编辑失败,请重试',
            type: 'fail'
          })
          return false
        }
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>
